5. HTML-code ändern
5.1 änderung über ID
Ein HTML-tag kann u.a. das attribut id haben, beispielsweise:
<p id="tagid">das ist ein text</p>
Über diese id kann man auf das HTML-tag der aktuellen seite (objekt document) zugreifen und es verändern, mit der wirkung, dass sich das aussehen der angezeigten seite entsprechen ändert. Der zugriff erfolgt mit der methode getElementByID des objekts document. Das ergebnis der methode sind verschiedene eigenschaften des HTML-tags. Diese eigenschaften kann man dann ändern. Man kann die eigenschaften, besser gesagt die referenzen auf eigenschaften auch in variablen sichern und damit zu einem späteren zeitpunkt die eigenschaft erneut ändern oder den ursprünglichen zustand wiederherstellen.
[ var eigen = ] document.getElementByID("tagid"). eigenschaft
Die methode greift mit hilfe der element-id auf ein element der seite zu und liefert die referenz auf eine eigenschaft des elements. Mit dieser referenz kann man lesend und schreibend auf die eigenschaft zugreifen.
eigenschaft style
Die eigenschaft ermöglicht den lesenden und schreibenden zugriff zu den
styles eines HTML-tags. Man kann direkt auf bestimmte styles zugreifen.
styles lesen
var erg1 = document.getElementByID("tagid").
style.color;
var erg2 = document.getElementByID("tagid").
style.background;
styles schreiben
document.getElementByID("tagid").style.color
= "farbe";
document.getElementByID("tagid").style.background
= "farbe";
Hier werden die textfarbe und die hintergrundfarbe gespeichert bzw. geändert. Dabei stört es nicht, wenn in dem angesprochenen tag keine hintergrundfarbe explizit gesetzt wurde, es ist dann eine browserspezifische standardfarbe gesetzt..
Häufig speichert man auch zunächst eine referenz auf die eigenschaft style in einer variablen und greift dann auf die verschiedenen styles mit hilfe dieser variablen zu.
var stil = document.getElementByID("tagid").style;
erg1 = stil.color;
erg2 = stil.background;
stil.color = "red";
stil.background = "aqua";
achtung
Styles wie height, width, top. left usw. sind angaben mit einer masseinheit
(z.b. 20px), sie sind also keine numerischen werte sondern zeichenketten.
Will man damit rechenoperationen durchführen, muss man den numerischen teil
aus der zeichenkette holen, am besten mit parseInt (vgl. 1.5). Hat
man zur änderung solcher styles einen numerischen wert, muss man ihn in
eine zeichenkette umwandeln und dabei die masseinheit anfügen, man schreibt
dann wert + "px"
eigenschaft className
Styles werden meist mit CSS-klassen vereinbart. Man
muss nun keineswegs die styles einzeln ändern, sondern man kann einfach
eine andere klasse zuweisen. Styles, die dadurch nicht geändert werden,
kann man zusätzlich wie zuvor beschrieben ändern.
erg = document.getElementById("tagid").className;
document.getElementById("tagid").className = "klasse";
eigenschaft innerHTML
HTML-tags wie hier das p-tag enthalten meist text, der angezeigt wird.
Auch dieser text kann geändert werden.
erg = document.getElementById("tagid").innerHTML;
document.getElementById("tagid").innerHTML = "text";
beispiel 5a - HTML-ändern über ID
Das folgende beispiel ist sehr umfangreich und wird deshalb schrittweise
erklärt. Zunächst wird der inhalt des body-tags gezeigt; hier gibt es eine
kleine grafik und drei p-tags mit text, ein tag steht in einem div-container.
Außerdem gibt es zwei links mit einem aufruf der funktionen change
und retour.
funktion change
Die funktion steht als JS-script im header der seite und sichert zunächst
in globalen variablen für
| p-tag p3: | style und innerHTML |
| p-tag p2 und p1: | style, innerHTML und className |
| div-tag hin1: | style, text-und hintergrundfarbe |
| grafik hexe: | breite und höhe |
Für das p-tag p3 wird über innerHTML der text geändert, über die variable zeilakt (enthält referenz auf style) werden textfarbe, hintergrundfarbe und breite geändert; ferner font, d.h. die schriftattribute dicke, stil, größe und schriftart, dabei können nicht die einzelattribute geändert werden, es muß vielmehr die kombinierte angabe gemacht werden (vgl CSS-doku 3.5.1).
Für das p-tag p2 werden über innerHTML der text und über className die CSS-klasse geändert. Die variable zeilakt enthält eine referenz auf style, damit werden text- und hintergrundfarbe und die breite geändert.
Für das p-tag p1 im div-container werden über innerHTML der text und über className die CSS-klasse und mit hilfe der variablen vp1 die text- und die hintergrundfarbe geändert. Für den container selbst werden die hintergrundfarbe und die breite geändert.
Für die grafik hexe wird in der variablen hilf die breite gespeichert, dann daraus mit parseInt der numerische teil herausgezogen und um 100 erhöht und zuletzt das ergebnis als zeichenkette in die breite zurückgeschrieben. Mit der höhe wird entprechend verfahren.
funktion retour
Die funktion stellt den ursprünglichen zustand wieder her und verwendet dazu
die oben gezeigten globalen variablen.
Die funktionen stehen im header des beispiels.
das ist ein text
auch das ist ein text
zeile in container
immer die reihenfolge ändern - ursprung einhalten